<template>
	<view class="foot-nav">
		<view class="foot-item" v-for="(a,i) in navFoot" @click="footnav(i)">
			<view class="foot-img-box">
				<image :src="on===i?a.path1:a.path" mode="" class="foot-icon"></image>
			</view>
			<view class="foot-item-text" :class="{on:on==i}">
				{{a.text}}
			</view>
		</view>
	</view>
</template>

<script>
	import icon1 from '@/static/images/mallShop/tarbar/icon1_on.png'
	export default {
		props:{
			on:{
				type:Number,
				default:0,
			}
		},
		data() {
			return {
				navFoot:[
					{
					path:'/static/images/mallShop/tarbar/icon1.png',
					path1:'/static/images/mallShop/tarbar/icon1_on.png',
					text:'首页',
					url:'/mallShop/home/home'
				},
				
				{
					path:'../../static/images/mallShop/tarbar/icon2.png',
					path1:'../../static/images/mallShop/tarbar/icon2_on.png',
					text:'分类',
					url:'/mallShop/cate/cate'
				},{
					path:'../../static/images/mallShop/tarbar/icon3.png',
					path1:'../../static/images/mallShop/tarbar/icon3_on.png',
					text:'购物车',
					url:'/mallShop/cart/cart'
				},{
					path:'../../static/images/mallShop/tarbar/icon4.png',
					path1:'../../static/images/mallShop/tarbar/icon4_on.png',
					text:'我的',
					url:'/mallShop/user/user'
				}]
			};
		},
		methods:{
			footnav(i){
				uni.navigateTo({
					url:this.navFoot[i].url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.foot-nav{
	display: flex;
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 100rpx;
	z-index: 100;
	background-color: #FFFFFF;
	.foot-img-box{
		height: 60rpx;
		padding-top:15rpx;
		box-sizing: border-box;
		.foot-icon{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.foot-item{
		flex:1;
		text-align: center;
	}
	.foot-item-text{
		margin-top: 4rpx;
		color: #333333;
		font-size: 24rpx;
		&.on{
			color: #F7603A;
		}
	}
}
</style>
